<template>
  <uni-popup ref="popup" type="bottom" background-color="#f5f5f5" :mask-click="false">
    <view class="cu-font-32 text-center cu-padding-20">手写签字</view>
    <view class="close-btn" @click="closeHandler">
      <uni-icons type="closeempty" size="20"></uni-icons>
    </view>
    <view class="canvns-wrap">
      <CuSignatureCanvas
        disableScroll
        ref="signatureRef"
        backgroundColor="#fff"
        :penSize="penSize"
        :openSmooth="openSmooth"
      />
    </view>
    <view class="button-wrap">
      <view class="clear-button" @click="handleClear()">清空</view>
      <view class="submit-button" @click="handleSave()">保存</view>
    </view>
  </uni-popup>
</template>

<script>
import CuSignatureCanvas from '@/components/cu-signature-canavs/cu-signature-canavs.vue'
export default {
  components: {
    CuSignatureCanvas
  },
  data() {
    return {
      title: '请输入签名',
      penSize: 5,
      openSmooth: true
    }
  },
  methods: {
    closeHandler() {
      this.$refs.popup.close()
      this.$emit('close')
    },
    open() {
      this.$refs.popup.open()
    },
    handleSave() {
      this.$refs.signatureRef.canvasToTempFilePath({
        success: (res) => {
          // 是否为空画板 无签名
          if (res.isEmpty) {
            this.$modal.showToast('请先签名')
            return
          }
          // 生成图片的临时路径
          // app | H5 | 微信小程序 生成的是base64 res: {tempFilePath: base64}
          this.$emit('success', res.tempFilePath)
          this.$refs.popup.close()
        }
      })
    },
    handleClear() {
      this.$refs.signatureRef.clear()
    }
  }
}
</script>

<style lang="scss" scoped>
.close-btn {
  position: absolute;
  right: 0rpx;
  top: 0rpx;
  width: 80rpx;
  line-height: 80rpx;
  text-align: center;
}

.canvns-wrap {
  width: 100%;
  height: 55vw;
  padding: 20rpx;
}

.button-wrap {
  padding: 20rpx;
  padding-top: 0;
  display: flex;

  .submit-button,
  .clear-button {
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    font-size: 36rpx;
    flex: 1;
    margin: 20rpx;
  }

  .submit-button {
    background: #2ac0c8;
    color: #ffffff;
  }

  .clear-button {
    border: 1rpx solid #ddd;
    background: #fff;
    color: #333;
  }
}
</style>
